<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>

<script>
    //es5之前，if和for都没块级作用域，必须借助function，
    //es6，加入了let，let它是有if和for的块级作用域

    //变量作用域：变量在什么范围内是可用的
    {
        var name = 'wj';
        console.log(name);
    }
        console.log(name);

    //没有块级作用域引起的问题:if的块级
    if(true){
        var game = 'lol'
    }
    console.log(game);

    //没有块级作用域引起的问题:for的块级
    //闭包可以解决问题
    // var btns = document.getElementsByTagName('button');
    // for (var i=0; i < btns.length; i++){
    //     btns[i].addEventListener('click',function (){
    //         console.log('第' + i + '个按钮被点击');
    //     })
    // }

    var btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++){
        btns[i].addEventListener('click',function () {
            console.log('第' + i + '个按钮被点击');
        })
    }

</script>

</body>
</html>